<template>
  <div>
    <div class="app-container">
      <div class="filter-container">
        <slot name="filter-content" />

        <el-row style="margin:10px 0 10px 0">
          <el-col :span="24" style="display:flex;flex-direction: colmun; justify-content: left">
            <el-button v-if="options.addRoute" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
            <el-select v-model="multiNow" :placeholder="selectedLabel" class="filter-item" style="width: 130px" @change="handleOption">
              <el-option
                v-for="item in multiActions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-col>
          <!-- <el-col :offset="14" :span="7" style="display:flex;flex-direction: colmun; justify-content: right">
            
          </el-col> -->
        </el-row>

      </div>

      <el-table
        v-if="dataList"
        v-loading="listLoading"
        :data="dataList.records"
        border fit highlight-current-row
        :header-cell-style="{'background':'#f2f3f4', 'color':'#555', 'font-weight':'bold', 'line-height':'32px'}"
        @selection-change="handleSelection" >

        <el-table-column align="center" type="selection" width="55" />

        <slot name="data-columns" />

      </el-table>

    </div>
    <el-pagination style="margin-top:10px"
			@current-change="page_change" 
			@size-change="size_change"
			background layout="prev, pager, next, sizes, jumper"
			:page-size="5" :page-sizes="[5,10,50,100]"
			:total="dataList?dataList.total:0">
		</el-pagination>
  </div>
</template>

<script>
import request from '@/request'
import _ from "lodash"

export default {
  name: 'PagingTable',
  props: {
    options: {
      type: Object,
      default: () => {
        return { controllerUrl: '' }
      }
    },

    // 列表查询参数Entity
    querys: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      listQuery: {
        current: 1, size: 5, params: null
      },
      // 接口数据返回
      // dataList: { total: 0},
      dataList: null,
      // 数据加载标识
      listLoading: true,
      // 选定和批量操作
      selectedIds: [],
      selectedObjs: [],
      // 显示已中多少项
      selectedLabel: '批量操作',
      // 批量操作el-select绑定变量
      multiNow: '',
      multiActions: [
        { value: 'delete', label: '删除'}
      ]
    }
  },
  watch: {
    // 检测查询变化
    listQuery: {
      handler() { this.getList() },
      deep: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    page_change(page){
      this.listQuery.current = page;
      this.getList()
    },
    size_change(size){
      this.listQuery.size = size;
      this.getList()
    },
    handleAdd() {
      if (this.options.addRoute) 
        this.$router.push({ name: this.options.addRoute, params: {}})
      else
        console.log('未设置添加数据跳转路由！')
    },

    // async getList() {
    getList() {
      this.listLoading = true
      this.listQuery.params = this.querys

      // var response = await request({ 
      //   method: 'post', url: `${this.options.controllerUrl}/query`, 
      //   data: this.listQuery
      // })
      // if(this.options.controllerUrl == '/subject'){
      //   var records = response.data.data.records
      //   for(var i=0;i<records.length;i++){
      //       var subject = records[i]
      //       subject = _.merge(subject, await this.getCount(subject.id))
      //       records[i] = subject
      //   }
      //   this.dataList = { records }
      // }else{
      //   this.dataList = response.data.data
      // }
      // this.listLoading = false

      request({ 
        method: 'post', url: `${this.options.controllerUrl}/query`, 
        data: this.listQuery
      }).then(response=>{
        this.dataList = response.data.data
        this.listLoading = false
      })
    },

    handleFilter() { this.getList() },

    /**
     * 批量操作回调
     */
    handleOption(v) {
      this.multiNow = ''

      // 内部消化的操作
      if (v === 'delete') {
        this.handleDelete()
        return
      }

      // // 向外回调的操作
      // this.$emit('multi-actions', { opt: v, ids: this.selectedIds })
    },

    /**
     * 删除数据
     */
    handleDelete() {
      if (this.selectedIds.length === 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }

      // 删除
      this.$confirm('确实要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({ 
          method: 'post', url: `${this.options.controllerUrl}/delete`, 
          data: this.selectedIds
        }).then(response=>{
          if(response.status == 200){
            this.$message.success('删除成功!')
            this.getList()
          }
        })
      })
    },

    /**
     * 列表多选操作
     */
    handleSelection(val) {
      this.selectedObjs = val
      this.selectedIds = val.map(row=>row.id)
      this.selectedLabel = '已选' + this.selectedIds.length + '项'

      // this.$emit('select-changed', { ids: this.selectedIds, objs: this.selectedObjs })
    }

  }
}
</script>

<style>

  .filter-container .filter-item{
    margin-left: 5px;
  }

  .filter-container .filter-item:first-child{
    margin-left: 0px;
  }
</style>
